<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import CreateThree from '@/three/base';
import * as THREE from 'three';
const scene = new CreateThree({
  stats: true,
  camera: {
    position: { y: 10, z: 10, x: 10 }
  },
  control: {
    minDistance: 10,
    maxDistance: 1000,
    enableDamping: true,
    maxPolarAngle: Math.PI / 2.5
  }
})
onMounted(() => {
  scene.bind('#container');
  const axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper);
  render();
  createPoint()
})
const render = (time?: number) => {
  scene.update(time);
  requestAnimationFrame(render);
}
const createPoint = () => {
  const vertices: any[] = []
  for (let i = 0; i <= 6; i++) {
    const x: number = Math.cos(Math.PI * 2 / 6 * i);
    const z: number = Math.sin(Math.PI * 2 / 6 * i);
    const x2: number = Math.cos(Math.PI * 2 / 6 * (i + 1));
    const z2: number = Math.sin(Math.PI * 2 / 6 * (i + 1));
    const p1 = [x, 2, z];
    const p2 = [x2, 2, z2];
    const p3 = [0, 0, 0];
    const p4 = [0, 3, 0];
    vertices.push(...p1, ...p2, ...p4, ...p1, ...p2, ...p3);
  }
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
  const material3 = new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide,
    color: 0xffffff
  });
  const mesh = new THREE.Mesh(geometry, material3);
  scene.add(mesh);
}
</script>